<template>
  <!-- <i :class="['iconfont', `${type}`]" :style="{fontSize:size + 'px'}"></i> -->
  <!-- <i class="iconfont" :class="iconClass" :style="{fontSize:size + 'px'}"></i> -->
  <i class="iconfont icon-container" :class="iconClass"></i>
  <!-- 在样式作用域限定情况下，iconfont作为根元素选择器会受到父组件的样式影响 -->
  <!-- 也许用props传递样式值比较好？ -->
</template>

<script>
const iconMap = {
  email: 'icon-email',
  qq: 'icon-qq-copy',
  success: 'icon-right-f',
  github: 'icon-GitHub',
  home: 'icon-homepage',
  close: 'icon-close',
  empty: 'icon-empty',
  error: 'icon-error1',
  comment: 'icon-comment',
  wechat: 'icon-wechat',
  warn: 'icon-warn_light',
  blog: 'icon-blog',
  downArrow: 'icon-down-arrow',
  upArrow: 'icon-up-arrow',
  about: 'icon-about',
  code: 'icon-code',
  juejin: 'icon-juejin',
  gitee: 'icon--GITEE',
  todo: 'icon-TODO_INFO',
  unknown: 'icon-tianqizitiku51',
  rarrow: 'icon-right-arrow',
  larrow: 'icon-left-arrow',
  info: 'icon-info'
};
export const types = Object.keys(iconMap)
export default {
  props: {
    type: {
      type: String,
      required: true
    }
  },
  computed: {
    iconClass() {
      return iconMap[this.type]
    }
  }
}
</script>

<style scoped>
@import "//at.alicdn.com/t/c/font_5005999_8v45dvq2ei3.css";
.iconfont {
  display: block;
  color: inherit;
  font-size: inherit;
}
</style>